<template>
    <Drawer
        :class="collapsed ? 'collapsed-drawer':'normal-drawer'"
        v-model="comptAlarmShow"
        width="504"
        placement="left"
        :mask-closable="false"
        :inner="true">
        <div slot="header">
            <span>告警中心</span>
            <div class="m-t-15">
                <DatePicker type="daterange" format="yyyy/MM/dd" placeholder="告警时间" style="width: 212px"
                    :start-date="alarmStartTime"
                    v-model="alarmTime" :options="alarmTimeOptions"
                    @on-change="onAlarmTimeChange"></DatePicker>
            </div>
        </div>
        <div class="alarm-drawer-content">
            <p class="m-l-15 m-b-5">告警列表</p>
            <CellGroup @on-click="onAlarmCellClick" v-if="alarmList.length > 0">
                <Cell v-for="(alarm, alarmIndex) in alarmList" :key="alarmIndex" :name="alarmIndex">
                    <Row>
                        <Col :span="21">
                            <div class="alarm-dot m-r-5" v-if="alarm.isConfirm == 0"></div><span>{{alarm.createTime | time}}</span>
                        </Col>
                        <Col :span="1">
                            <Tag color="success" v-if="alarm.isConfirm == 2">已处理</Tag>
                            <Tag color="warning" v-else>未处理</Tag>
                        </Col>
                    </Row>
                    <div slot="label">
                        <p class="m-b-10">消息名称：{{alarm.title | text}}</p>
                        <p class="alarm-message-content">消息内容：{{alarm.messageContent | text}}</p>
                    </div>
                </Cell>
            </CellGroup>
            <div v-else-if="!loading" style="margin: auto; padding-top: 50%; text-align: center;">
                <img src="../../assets/images/dog/sleep.png"></img>
                <div style="color: #666666;">
                    还没有告警消息哦~
                </div>
            </div>
            <div class="page" v-if="total > 0">
                <Page :total="total" :page-size="page.pageSize" :current="page.pageNum"
                @on-change="pageNumChange" size="small" show-elevator></Page>
            </div>
        </div>
        <Spin fix size="large" v-if="loading"></Spin>
        <alarm-detail ref="alarmDetail" @refresh="queryAlarmList"></alarm-detail>
    </Drawer>
</template>

<script>
import getData          from 'getData'
import { mapGetters }   from 'vuex'

import AlarmDetail      from './alarm-detail.vue'

export default {

    components: {
        AlarmDetail
    },

    computed: {
        ...mapGetters(['collapsed','alarmShow'])
    },

    data () {
        return {
            alarmList: [],
            loading: false,
            comptAlarmShow: false, //组件内的显示控制
            alarmTime: [],
            alarmStartTime: null, //下拉菜单开始时间
            alarmTimeOptions: {
                disabledDate (date) {
                    return date.valueOf() > Date.now();
                }
            },
            page: {
                pageNum: 1,
                pageSize: 9
            },
            total: 0,
        }
    },
    watch: {
        comptAlarmShow(val) {
            this.$store.commit('setAlarmShow', val); //显示同步至Vuex
        }
    },
    methods: {
        queryAlarmList() {
            this.loading = true;
            var reqData = this.page;
            reqData.params =  {
                startTime: this.alarmTime[0],
                endTime: this.alarmTime[1]
            };
            getData.post('queryAlarmList', reqData).then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.alarmList = res.data.data;
                    this.total = res.data.total;
                } else {

                }
                this.loading = false;
            })
        },
        onAlarmTimeChange() {

        },
        init() {
            var today           = new Date();
            var startTime       = new Date();
            var startSelectTime = new Date();

            startTime.setDate(today.getDate() - 7);     //默认显示一周告警信息
            startSelectTime.setMonth(today.getMonth() - 1);

            this.$set(this, 'alarmStartTime', startSelectTime);
            this.$set(this, 'alarmTime', [startTime, today]);
        },
        show() {
            this.init();
            this.queryAlarmList();
            this.comptAlarmShow = true;
        },
        close() {
            this.comptAlarmShow = false;
        },
        pageNumChange(pageNum) {
            this.page.pageNum = pageNum;
            this.queryAlarmList();
        },
        onAlarmCellClick(index) {
            var alarm = this.alarmList[index];
            if (alarm.state == 0) {
                this.$set(this.alarmList[index], 'state', 1);
                getData.get('confirmSysMsg', {}, alarm.id);
            }
            this.$refs.alarmDetail.show(alarm);
        }
    },
    mounted () {
        // this.init();
    }
}
</script>

<style lang="less">
.ivu-drawer-header {
    height: 9%;
}
.ivu-drawer-body {
    position: relative;
    height: 91%;
    padding: 8px 0;
    font-size: 14px;
    .ivu-drawer-content {
        background-color: #f0f2f5;
    }
}
.normal-drawer{
    .ivu-drawer-mask {
        left: 216px;
    }
    .ivu-drawer-wrap {
        left: 216px;
    }
}
.collapsed-drawer {
    .ivu-drawer-mask {
        left: 88px;
    }
    .ivu-drawer-wrap {
        left: 88px;
    }
}

</style>
